<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list one">
        <li id="first">01</li>
        <li>02</li>
        <li class="mid">03</li>
        <li class="mid">04</li>
        <li>05</li>
        <li>06</li>
    </ul>
    <ul class="list two">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
    </ul>

</body>
<script>
    // 获取元素节点  => 获取html元素

    // 1. 从文档获取中获取 指定 id名 class名 标签名 name  选择器对应的元素
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // document.querySelector();
    // document.querySelectorAll()

    var liList = document.getElementsByTagName("li");
    console.log(liList);

    // 2. 通过父元素获取指定 class名 和 标签名的元素(子代元素) (注意:getElementById,getElementsByName方法存在于文档中)

    var one = document.getElementsByClassName("one")[0];
    // console.log(one, typeof one);
    // var liList = one.getElementsByTagName("li");
    // console.log(liList);
    // var midList = one.getElementsByClassName("mid");
    // console.log(midList);

    // var result = one.getElementById("first")
    // console.log(result);

    var liList = one.querySelectorAll("li");
    console.log(liList);
</script>

</html>